<?php include('../../blocks/header.inc'); ?>

<div class="conteneur_general">
  <div class="bloc_recherche_dark rounded7">
    This is the first tutorial of a serie that will learn you the basics of the creation of an application.<br>
    You can directly view the result of this tutorial by going to the <a href="#">live demo</a>.
  </div>

  <div class="coche_blanc"></div>
  <div class="bloc_contenu rounded7">  
    <h1>Tutorial 1 : <b>How to display your first object list</b></h1>
    <div class="encart">
    
            
        For this tutorials, we are going to build the first step of a simple blog application : display blog entries.
        <br>
        A blog entry object will be made of :
        <ul>
        <li type="square">a title</li>
        <li type="square">a date</li>
        <li type="square">a content</li>
        <li type="square">the name of the poster</li>
        </ul>
        The blog entry object will be named "BlogEntry". Only one view will be available in this tutorial, we'll call it "DetailedView".





        <h2>1. Create your HTML document</h2>
<pre>
&lt;div id="blogContainer"&gt;
  &lt;div class="blog_entry"&gt;
    &lt;h2 class="blog_title"&gt;&lt;/h2&gt;
    &lt;p class="post_date"&gt;&lt;/p&gt;
    &lt;p class="entry_content"&gt;&lt;/p&gt;
    &lt;p class="signature"&gt;Published by : &lt;span&gt;&lt;/span&gt;&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>
        <a href="tuto1step1.html" target="_blank">See it live !</a>
         
         
         
         
        <h2>2. Include scripts</h2>
        Simply put this code in your document header :      
<pre>
&lt;script type="text/javascript" src="../bibliotheques/jquery.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="../bibliotheques/pause.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="../bibliotheques/jquery.blockUI.js.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="../bibliotheques/interface.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="../bibliotheques/firebug/firebug.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="http://www.ohmydata.org/jsGUIGuy/guiguy.pack.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;initGuiGuy();&lt;/script&gt;
</pre>




        <h2>3. Add custom tag attributes (cf. custom attributes reference)</h2>
        In order to have your pattern processed, you must put some specific attributes on your html model. 
        <br>
        Some of them are necessary :
        <ul>
            <li type="square">a "dataSource" attribute : url of the datasource. For our example, we'll use a static datasource. <a href="tuto1_source.html" target="_blank">(See here how it looks like)</a></li>
            <li type="square">a "dataObject" attribute defining the name of the object it corresponds to.</li>
        </ul>
        Others are optional :
        <ul>
          <li type="square">defaultView : the default view to display on loading. In our example, it's "DetailedView"</li>
          <li type="square">callMethod : the way data will be exchanged with the datasource (can be ""frame", "xmlhttprequest" or "ondemandjs")</li>
        </ul>
        Your [Step 1] code will become :
<pre>
&lt;div id="blogContainer" <b>dataSource="tuto1_source.html"</b> 
        <b>dataObject="BlogEntry" defaultView="DetailedView" callMethod="iframe"</b>&gt;
  &lt;div class="blog_entry"&gt;
    &lt;h2 class="blog_title"&gt;&lt;/h2&gt;
    &lt;p class="post_date"&gt;&lt;/p&gt;
    &lt;p class="entry_content"&gt;&lt;/p&gt;
    &lt;p class="signature"&gt;Published by : &lt;span&gt;&lt;/span&gt;&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>
          
          
          
          
          
        <h2>4. Add ids and specific css pseudo-classes</h2>
        Now you have a model, it's time to tell GUIGuy what in your document is an object view, and where to put your object attributes. Specific ids and CSS pseudo-classes will be used for that.
        By "CSS pseudo-classes", we mean css classes that don't have to be associated with a class definition. 
        You have to define the following ids and classes :
        <ul>
          <li type="square">On views : an id to define the DOM Object as an object view pattern: id=pattern_[your dataType name]_[a view name]</li>
          <li type="square">On attributes : a class named as the "data" attribute value</li>
        </ul>
        Your [Step 3] code will become :
<pre>
&lt;div id="blogContainer" dataSource="tuto1_source.html" 
        dataObject="BlogEntry" defaultView="DetailedView" callMethod="iframe"&gt;
  &lt;div class="blog_entry" <b>id="pattern_BlogEntry_DetailedView</b>"&gt;
    &lt;h2 class="blog_title <b>title</b>"&gt;&lt;/h2&gt;
    &lt;p class="post_date <b>date</b>"&gt;&lt;/p&gt;
    &lt;p class="entry_content <b>content</b>"&gt;&lt;/p&gt;
    &lt;p class="signature"&gt;Published by : &lt;span <b>class="poster"</b>&gt;&lt;/span&gt;&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>




        <h2>5. Hide templates : </h2>
        Once your model is done, hide templates setting css attribute "display" at "none".
        <br>
        Your [Step 4] code will become :
<pre>
&lt;div id="blogContainer" dataSource="tuto1_source.html" 
        dataObject="BlogEntry" defaultView="DetailedView" callMethod="iframe"&gt;
  &lt;div class="blog_entry" id="pattern_BlogEntry_DetailedView" <b>style="display:none;"</b>&gt;
    &lt;h2 class="blog_title title"&gt;&lt;/h2&gt;
    &lt;p class="post_date date"&gt;&lt;/p&gt;
    &lt;p class="entry_content content"&gt;&lt;/p&gt;
    &lt;p class="signature"&gt;Published by : &lt;span class="poster"&gt;&lt;/span&gt;&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>




        <h2>6. Define loading behaviour</h2>

        Automatic data loading behaviour can be specified within your document (as opposed to manual loading using API events) 
        Those specific css pseudo-classes can be used :
        <ul>
          <li type="square">"load_on_start" : will be processed on page load</li>
          <li type="square">"load_on_parent" : automatically loaded when parent object is displayed (we'll discuss this in another tutorial)</li>
        </ul>
        Your [Step 5] code will become :
<pre>
&lt;div id="blogContainer" <b>class="load_on_start"</b> dataSource="tuto1_source.html" 
        dataObject="BlogEntry" defaultView="DetailedView" callMethod="iframe"&gt;
  &lt;div class="blog_entry" id="pattern_BlogEntry_DetailedView" style="display:none;"&gt;
    &lt;h2 class="blog_title title"&gt;&lt;/h2&gt;
    &lt;p class="post_date date"&gt;&lt;/p&gt;
    &lt;p class="entry_content content"&gt;&lt;/p&gt;
    &lt;p class="signature"&gt;Published by : &lt;span class="poster"&gt;&lt;/span&gt;&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>



        <h2>7. Go ! </h2>
        <a href="tuto1step6.html" target="_blank">Let's see the demo.</a>    
    
    
      
    </div>
    <div class="separ"></div>
    
    <div class="footer_block">
            &nbsp;            
     </div>
     
     
  </div>   
</div>


<?php include('../../blocks/tutos_right.inc'); ?>

<?php include('../../blocks/footer.inc'); ?>